<!--
 * @Description:右侧内容
 * @Version: 2.0
 * @Autor: kafei
 * @Date: 2021-11-29 11:38:44
 * @LastEditors: kafei
 * @LastEditTime: 2021-12-20 14:28:05
-->
<template>
  <div class="systemUser__rightContent z-w-100">
    <tableSearch
      ref="tableSearch"
      :item-data="itemData"
      :button-data="cButtonData"
      :column-data="columnData"
      :immediately="false"
      :api="getUserByDeptId"
      @click="btnClick"
    >
      <template
        slot="rid"
        slot-scope="{row,props}"
      >
        {{ changeLabel(roleData,row[props]) }}
      </template>
      <template
        slot="depId"
        slot-scope="{row,props}"
      >
        {{ changeLabel(departMentData,row[props]) }}
      </template>
      <template
        slot="status"
        slot-scope="{row,props}"
      >
        <el-tag
          v-if="row[props] && row[props].length>0"
          :type="row[props] === '1'?'success':'warning'"
          size="small"
        >
          {{ changeLabel(statusData,row[props]) }}
        </el-tag>
      </template>
      <template
        slot="action"
        slot-scope="{row}"
      >
        <ButtonConfig
          :button-data="actionData"
          :row="row"
          @click="actionClick"
        />
      </template>
    </tableSearch>
    <baseDialog
      ref="baseDialog"
      :befor-comfire="beforComfire"
      :title="cTitle"
    >
      <template slot="content">
        <el-scrollbar
          class="scrollbarCls is-horizontal--none"
        >
          <Form
            ref="Form"
            :key="refreshFromKey"
            v-model="initFormData"
            :item-data="formData"
            :rules="rules"
            :form-config="formConfig"
          />
        </el-scrollbar>
      </template>
    </baseDialog>
  </div>
</template>

<script>
import tableSearch from '@/components/tableSearch/index.vue'
import Form from '@/components/Form/index.vue'
import { itemData, buttonData, columnData } from './data'
import { getUserByDeptId, getAllrole, getAllListDepartMentController, upDateUser, delUser } from '@/api/systemUser'
import { getMapByType } from '@/api/map.js'
import { changeLabel, getListToRules } from '@/utils/index.js'
import ButtonConfig from '@/components/ButtonConfig/index.vue'
import baseDialog from '@/components/baseDialog/index.vue'
import { formData } from './formData'
import { register } from '@/api/login.js'
export default {
  name: 'RightContent',
  components: {
    tableSearch,
    ButtonConfig,
    baseDialog,
    Form
  },
  data () {
    return {
      itemData,
      buttonData,
      columnData,
      departMentData: [],
      roleData: [],
      actionData: [
        { type: 'text', text: '修改', actionType: 'update' },
        { type: 'text', text: '查看', actionType: 'view' },
        { type: 'text', text: '删除', actionType: 'delete' }
      ],
      statusData: [],
      formData,
      rules: {},
      initFormData: {},
      refreshFromKey: 1,
      actionType: 'add',
      formConfig: {
        disabled: false,
        hideRequiredAsterisk: false
      }
    }
  },
  computed: {
    treeNode () {
      return this.$parent.treeNode
    },
    cButtonData () {
      return this.treeNode.isLeaf ? buttonData : [{
        text: '刷新',
        type: 'success',
        icon: 'el-icon-refresh-right',
        actionType: 'refresh'
      }]
    },
    cTitle () {
      const map = {
        add: '新增用户',
        view: '查看用户',
        update: '修改用户'
      }
      return map[this.actionType]
    }
  },
  created () {
    this.getAllroleFun()
    this.getAllListDepartMentControllerFun()
    this.getMapByTypeFun()
  },
  methods: {
    // 点击确定检验弹窗表单数据
    async beforComfire () {
      const access = this.$refs.Form.validator()
      const isAdd = this.actionType === 'add'
      if (access) {
        const data = this.$refs.Form.form
        const depId = this.$parent.node.depId
        data.depId = depId || ''
        const res = isAdd ? await register(data) : await upDateUser(data)
        if (res.code === '0') {
          this.$message.success('操作成功')
          this.$refs.tableSearch.refreshList()
        }
        return true
      }

      return false
    },
    getUserByDeptId,
    changeLabel,
    actionClick (item, row) {
      this.actionType = item.actionType
      this.rules = getListToRules(formData)
      if (item.actionType === 'update') {
        console.log(row, 'rowrow')
        this.$set(this.formConfig, 'disabled', false)
        this.$set(this.formConfig, 'hideRequiredAsterisk', false)
        this.setDialogStatus(row) // 设置弹窗状态 新增 修改
      } else if (item.actionType === 'delete') {
        this.$set(this.formConfig, 'hideRequiredAsterisk', false)
        this.handleDelete(row.id)
      } else if (item.actionType === 'view') {
        this.$set(this.formConfig, 'disabled', true)
        this.$set(this.formConfig, 'hideRequiredAsterisk', true)
        this.setDialogStatus(row)
      }
    },

    // 删除
    handleDelete (id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await delUser({ id })
        if (res.code === '0') {
          this.$message.success('操作成功')
          this.$refs.tableSearch.refreshList()
          // isAdd ? this.setListTable({ depId: depId, page: 1, size: 10 }) : this.$refs.tableSearch.refreshList()
        }
      })
    },

    // 设置弹窗状态 新增 修改
    setDialogStatus (data) {
      this.refreshFromKey++ // 刷新表单
      this.rules = getListToRules(formData) // 把formData数据转换成为rules数据
      this.setDefaultFormData(data) // 设置默认显示的数据
      this.setItemSelectData() // 设置表单下拉的数据
      this.$refs.baseDialog.show() // 弹窗显示
      this.$nextTick(() => {
        const targetKeys = Object.keys(this.rules)
        this.$refs.Form.clearValidate(targetKeys) // 清除上次错误信息
      })
    },
    btnClick (item) {
      if (item.actionType === 'refresh') {
        this.$emit('refresh')
      } else if (item.actionType === 'add') {
        this.actionType = item.actionType
        this.$set(this.formConfig, 'disabled', false)
        this.$set(this.formConfig, 'hideRequiredAsterisk', false)
        const data = {
          status: '1',
          isLeave: '1',
          telphone: '13800138000'
        }
        this.setDialogStatus(data) // 设置弹窗状态 新增 修改
      }
    },
    // 设置默认数据
    setDefaultFormData (data) {
      this.initFormData = {}
      for (const key in data) {
        this.$set(this.initFormData, key, data[key])
      }
      console.log(this.initFormData, 'this.initFormData')
    },
    // 设置弹窗表单选择下拉数据
    setItemSelectData () {
      const targetRid = this.formData.find(v => v.props === 'rid')
      if (targetRid) {
        this.$set(targetRid.config, 'options', this.roleData)
      }
    },
    setListTable (params) {
      this.$refs.tableSearch.setListTable(params)
    },
    async getMapByTypeFun () {
      const result = await getMapByType('status')
      if (result.code === '0') {
        this.statusData = result.data
      }
    },
    async getAllListDepartMentControllerFun () {
      const result = await getAllListDepartMentController()
      if (result.code === '0') {
        this.departMentData = result.data
        this.departMentData = this.departMentData.map(v => {
          const json = {
            value: v.depId,
            label: v.label,
            ...v
          }
          return json
        })
        console.log(this.departMentData, 'departMentDatadepartMentData')
      }
    },
    async getAllroleFun () {
      const result = await getAllrole()
      if (result.code === '0') {
        this.roleData = result.data
        this.roleData = this.roleData.map(v => {
          const json = {
            value: v.rid,
            label: v.rdesc,
            ...v
          }
          return json
        })
      }
    }
  }
}
</script>

<style>

</style>
